import React, { Component } from 'react';
import './index.css';
class Parent extends Component {
    render() {
        return (
            <div className="parent">
                <h3>我是Parent组件</h3>
                <A render={(name)=>  <B name={name}/>}>
                   
                </A>
            </div>
        );
    }
}

class A extends Component {
    state = {name:'tom'}
    render() {
        console.log('A---render');
        const {name} = this.state
        return (
            <div className="a">
                <h3>我是A组件</h3>
              {/*   {this.props.children} */}
                {/*   <B /> */}
                {this.props.render(name)}
            </div>
        );
    }
}

class B extends Component {
    render() {
        console.log('B---render');
        return (
            <div className="b">
                <h3>我是B组件</h3>
                <h3>A组件名称:{this.props.name}</h3>
            </div>
        );
    }
}
export default Parent;
